<template>
  <div>
    <!-- 物流单评价 -->
    <!-- 书写标题头 -->
    <div class="star_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>快递单</span>
    </div>
    <van-search
      v-model="strValue"
      show-action
      placeholder="快递单号"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 快递单列表样式排版 -->
    <ul>
      <li v-for="item in records" :key="item.id">
        <!-- 上部结构 -->
        <div class="descript_cont">
          <span>快递单号：{{ item.orderCode }}</span>
          <span>&gt;</span>
        </div>
        <!-- 中部结构 -->
        <div class="count_order">
          <div class="zuo"></div>
          <div class="you">
            <h3>下单时间 {{ item.createTime }}</h3>
            <p class="p1"><span>收货人</span>{{ item.consignee }}</p>
            <p><span>发货人 </span>{{ item.consignor }}</p>
          </div>
        </div>
        <!-- 下部状态按钮结构 -->
        <div class="btn_sub">
          <van-button
            color="#FFCC33"
            size="small"
            @click="
              pingjia({
                id: item.id,
                orderCode: item.orderCode,
                star: item.star,
              })
            "
            >{{ item.star == 0 ? "评价" : "查看评价" }}</van-button
          >
        </div>
      </li>
    </ul>
    <!-- 评价页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetStarList } from "@/request/api";
export default {
  data() {
    return {
      // 搜索框内的数据
      strValue: "",
      // 列表数据
      records: [],
      // 传出去的id与送货单号
      // info: "",
      // 按钮的内容
      btnVal: "",
    };
  },
  created() {
    GetStarList({
      current: 1,
      size: 10,
      keyword: "",
    }).then((res) => {
      this.records = res.data.records;
      console.log(this.records);
    });
  },
  methods: {
    //   返回上一个页面，即首页
    fanhui() {
      this.$router.go(-1);
    },
    // 搜索功能
    onSearch() {
      GetStarList({
        current: 1,
        size: 10,
        keyword: this.strValue,
      }).then((res) => {
        this.records = res.data.records;
      });
    },
    // 跳转到评价页
    pingjia(val) {
      val.star == 0
        ? this.$router.push({
            path: "/star/starpingjia",
            query: { id: val.id, orderCode: val.orderCode },
          })
        : this.$router.push({
            path: "/star/starpjinfo",
            query: { id: val.id },
          });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 标题头的样式 */
.star_title {
  width: 100%;
  height: 0.5rem;
  background-color: #003399;
  text-align: center;
  line-height: 0.5rem;
  color: white;
  font-size: 0.18rem;
  padding-top: 0.1rem;
  .one {
    float: left;
    margin-left: 0.2rem;
  }
}
/* 搜索按钮字体颜色 */
.van-search__action {
  color: #003399;
}
/* 物流单列表样式 */
li {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  margin-top: 0.1rem;
  .descript_cont {
    height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
    padding: 0 0.2rem;
  }
  /* 订单描述的具体内容样式 */
  .count_order {
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .zuo {
      height: 0.7rem;
      width: 0.7rem;
      background-color: wheat;
      margin-right: 0.1rem;
    }
    .you {
      height: 0.7rem;
      flex: 1;
      background-color: yellow;
      p {
        span {
          margin-right: 0.1rem;
        }
      }
      .p1 {
        line-height: 0.4rem;
      }
    }
  }
  .btn_sub {
    height: 0.5rem;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    border-top: 1px solid #efefef;
    .van-button {
      float: right;
      border-radius: 0.15rem;
      padding: 0 0.15rem;
    }
  }
}
</style>